<!DOCTYPE HTML>
<html>
    <head>
        <title>ms-repeat</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
        <script src="../avalon.js" ></script>
        <style>
            .red{
                color:red;
            }
            .green{
                color:greenyellow;
            }
        </style>
        <script >

            var model = avalon.define({
                $id: "test",
                object: {
                    a: 1,
                    b: 1,
                    c: 1,
                    d: 1
                },
                text: "初始状态"
            })
            setTimeout(function(){
                  setTimeout(function() {
                model.text = "修改"
                model.object = {
                    a: 2,
                    b: 2,
                    c: 2,
                    d: 2
                }
            }, 1000)
            setTimeout(function() {
                model.text = "移除"
                model.object = {
                    a: 3,
                    b: 3
                }
            }, 2000)
            setTimeout(function() {
                model.text = "添加"
                model.object = {
                    a: 3,
                    b: 3,
                    f: 4,
                    g: 4
                }
            }, 3000)
            setTimeout(function() {
                model.text = "排序"
                model.object = {
                    g: 4,
                    f: 4,
                    b: 3,
                    a: 3
                }
            }, 4000)
            },5000)
          
        </script>

    </head>
    <body ms-controller="test" >
        <p>演示对象循环的对象被整个替换掉的效果</p>
        <p>{{text}}实验</p>
        <ul>
            <li ms-repeat="object">{{$key}}:<strong>{{$val}}</strong>(通过ms-repeat实现)</li>
        </ul>
        <ol ms-with="object">
            <li>{{$key}}:<strong>{{$val}}</strong>(通过ms-with实现)</li>
        </ol>
    </body>
</html>
